<div class="dialog">
  <h1>{{i18n "dialog.preferences.project.title"}}: {{projectDirectory}}</h1>
  <form action="" method="GET" id="dialog">
    <!-- Transmit the project's hash as well. -->
    <input type="hidden" name="projectHash" value="{{hash}}">
    <div id="prefs-tabs" class="clear">
      <ul>
        <li><a href="#prefs-tabs-general">{{i18n "dialog.preferences.pdf.metadata"}}</a></li>
        <li><a href="#prefs-tabs-page">{{i18n "dialog.preferences.pdf.page"}}</a></li>
        <li><a href="#prefs-tabs-font">{{i18n "dialog.preferences.pdf.font"}}</a></li>
      </ul>
      <!-- Metadata for PDF files -->
      <div id="prefs-tabs-general">
        <p>{{i18n "dialog.preferences.pdf.metadata_intro"}}</p>
        <div class="box-left">
          <label for="title">{{i18n "dialog.preferences.project.title_label"}}</label>
          <input type="text" name="title" id="title" value="{{title}}" placeholder="{{i18n "dialog.preferences.project.title_label"}}">
          <label for="pdf.author">{{i18n "dialog.preferences.pdf.author_label"}}</label>
          <input type="text" name="pdf.author" id="pdf.author" value="{{pdf.author}}" placeholder="{{i18n "dialog.preferences.pdf.author"}}">
          <label for="pdf.keywords">{{i18n "dialog.preferences.pdf.keywords_label"}}</label>
          <input type="text" name="pdf.keywords" if="pdf.keywords" value="{{pdf.keywords}}" placeholder="{{i18n "dialog.preferences.pdf.keywords"}}">
          <hr>
          <label for="textpl">{{i18n "dialog.preferences.pdf.textpl"}}</label>
          <div class="input-button-group">
            <input type="text" name="pdf.textpl" id="textpl" value="{{pdf.textpl}}">
            <button type="button" class="request-file"
            data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
            data-request-name="TeX Template File"
            data-request-ext="tex"
            data-request-target="#textpl"><clr-icon shape="file"></clr-icon></button>
          </div>
        </div>
        <div class="box-right">
          <label class="cb-toggle">
            <input type="checkbox" value="yes" name="pdf.titlepage" id="pdf.titlepage" {{#if pdf.titlepage}}checked="checked"{{/if}}>
            <div class="toggle"></div>
          </label>
          <label for="pdf.titlepage">{{i18n "dialog.preferences.pdf.titlepage_label"}}</label>
          <div class="clearfix"></div>
          <label class="cb-toggle">
            <input type="checkbox" value="yes" name="pdf.toc" id="pdf.toc" {{#if pdf.toc}}checked="checked"{{/if}}>
            <div class="toggle"></div>
          </label>
          <label for="pdf.toc">{{i18n "dialog.preferences.pdf.toc_label"}}</label>
          <select name="pdf.tocDepth">
            <option value="1" {{#ifCond pdf.tocDepth '=' 1}}selected="selected"{{/ifCond}}>1</option>
            <option value="2" {{#ifCond pdf.tocDepth '=' 2}}selected="selected"{{/ifCond}}>2</option>
            <option value="3" {{#ifCond pdf.tocDepth '=' 3}}selected="selected"{{/ifCond}}>3</option>
            <option value="4" {{#ifCond pdf.tocDepth '=' 4}}selected="selected"{{/ifCond}}>4</option>
            <option value="5" {{#ifCond pdf.tocDepth '=' 5}}selected="selected"{{/ifCond}}>5</option>
            <option value="6" {{#ifCond pdf.tocDepth '=' 6}}selected="selected"{{/ifCond}}>6</option>
          </select>
          <hr>
          <label for="format">{{i18n "dialog.preferences.project.format"}}</label>
          <select name="format">
            {{#each availableExportFormats}}
            <option value="{{this}}" {{#ifCond this '=' ../format}}selected="selected"{{/ifCond}}>{{this}}</option>
            {{/each}}
          </select>
          <hr>
          <label for="cslStyle">{{i18n "dialog.preferences.project.csl_style"}}</label>
          <div class="input-button-group">
            <input type="text" name="cslStyle" id="cslStyle" value="{{cslStyle}}">
            <button type="button" class="request-file"
              data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
              data-request-name="Citation Style Language File"
              data-request-ext="csl"
              data-request-target="#cslStyle"><clr-icon shape="file"></clr-icon></button>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <!-- Page layout -->
      <div id="prefs-tabs-page">
        <p>{{i18n "dialog.preferences.pdf.page_intro"}}</p>
        <hr>
        <div class="clear"></div>
        <div class="box-left">
          <div class="paper a4paper">
            <input class="tmargin" type="number" min="0" max="9999" step="0.1" name="pdf.tmargin" id="pdf.tmargin" value="{{pdf.tmargin}}" placeholder="{{i18n "dialog.preferences.pdf.tmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.tmargin_label"}}">
            <input class="rmargin" type="number" min="0" max="9999" step="0.1" name="pdf.rmargin" id="pdf.rmargin" value="{{pdf.rmargin}}" placeholder="{{i18n "dialog.preferences.pdf.rmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.rmargin_label"}}">
            <input class="bmargin" type="number" min="0" max="9999" step="0.1" name="pdf.bmargin" id="pdf.bmargin" value="{{pdf.bmargin}}" placeholder="{{i18n "dialog.preferences.pdf.bmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.bmargin_label"}}">
            <input class="lmargin" type="number" min="0" max="9999" step="0.1" name="pdf.lmargin" id="pdf.lmargin" value="{{pdf.lmargin}}" placeholder="{{i18n "dialog.preferences.pdf.lmargin"}}" data-tippy-content="{{i18n "dialog.preferences.pdf.lmargin_label"}}">
          </div>
        </div>
        <div class="box-right">
          <label for="pdf.margin_unit">{{i18n "dialog.preferences.pdf.unit_label"}}</label>
          <select name="pdf.margin_unit" id="pdf.margin_unit">
            {{#each availableMarginUnits}}
            <option value="{{this}}" {{#ifCond this '=' ../pdf.margin_unit}}selected="selected"{{/ifCond}}>{{this}}</option>
            {{/each}}
          </select>
          <hr>
          <label for="pdf.papertype">{{i18n "dialog.preferences.pdf.papertype"}}</label>
          <select name="pdf.papertype">
            {{#each supportedPapertypes}}
            <option value="{{this}}" {{#ifCond this '=' ../pdf.papertype}}selected="selected"{{/ifCond}}>{{this}}</option>
            {{/each}}
          </select>
          <hr>
          <label for="pdf.pagenumbering">{{i18n "dialog.preferences.pdf.pagenumbering_label"}}</label>
          <select name="pdf.pagenumbering">
            {{#each availablePageNumberingSystems}}
            <option value="{{this}}" {{#ifCond this '=' ../pdf.pagenumbering}}selected="selected"{{/ifCond}}>{{i18n "dialog.preferences.pdf.pagenumbering_" this }}</option>
            {{/each}}
          </select>
        </div>
        <div class="clear"></div>
      </div>
      <!-- Font options -->
      <div id="prefs-tabs-font">
        <p>{{i18n "dialog.preferences.pdf.font_intro"}}</p>
        <div class="box-left">
          <label for="pdf.mainfont">{{i18n "dialog.preferences.pdf.mainfont_label"}}</label>
          <input type="text" name="pdf.mainfont" id="mainfont" value="{{pdf.mainfont}}" placeholder="{{i18n "dialog.preferences.pdf.mainfont"}}">
          <label for="pdf.sansfont">{{i18n "dialog.preferences.pdf.sansfont_label"}}</label>
          <input type="text" name="pdf.sansfont" id="sansfont" value="{{pdf.sansfont}}" placeholder="{{i18n "dialog.preferences.pdf.sansfont"}}">
          <label for="pdf.fontsize">{{i18n "dialog.preferences.pdf.fontsize_label"}}</label>
          <input type="number" min="0" max="10000" step="1" name="pdf.fontsize" id="fontsize" value="{{pdf.fontsize}}" placeholder="{{i18n "dialog.preferences.pdf.fontsize"}}">
          <label for="pdf.lineheight">{{i18n "dialog.preferences.pdf.lineheight_label"}}</label>
          <input type="number" min="0" max="1000" step="1" name="pdf.lineheight" id="lineheight" value="{{pdf.lineheight}}" placeholder="{{i18n "dialog.preferences.pdf.lineheight"}}">
        </div>
        <div class="box-right">
          <!-- This is the preview tab. It shows how everything will look afterwards. -->
          <h1 class="pdf-preview">Lorem Ipsum Dolor</h1>
          <p class="pdf-preview">
            Lorem ipsum dolor sit amet, consectetur adipisici elit,
            sed eiusmod tempor incidunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquid ex ea
            commodi consequat. Quis aute iure reprehenderit in
            voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint obcaecat cupiditat non proident,
            sunt in culpa qui officia deserunt mollit anim id est
            laborum.
          </p>
        </div>
      </div>
    </div>
    <div class="clearfix">
      <button type="submit" id="pref-save">{{i18n "dialog.button.save"}}</button>
      <button id="abort">{{i18n "dialog.button.cancel"}}</button>
      <span class="error-info"></span>
    </div>
  </form>
</div>
